import {
    useEffect,
    useMemo,
    useState,
} from 'react';
import {createPortal} from 'react-dom';
import {getComponentById, useComponentsStore} from "../../stores/components.tsx";
import {debounceHandle} from "../../utils/throttle.ts";

interface HoverMaskProps {
    portalWrapperClassName: string
    containerClassName: string
    componentId: number;
}

/**
 * 设置遮罩层和title大小和位置 采用绝对定位返回一个遮罩层和title
 * @param portalWrapperClassName 遮罩层容器的className
 * @param containerClassName 编辑区最外层容器的className
 * @param componentId 当前组件的id
 * */
function HoverMask({portalWrapperClassName, containerClassName, componentId}: HoverMaskProps) {
    const {components,currentComponentId} = useComponentsStore()

    const [position, setPosition] = useState({
        left: 0,
        top: 0,
        width: 0,
        height: 0,
        labelTop: 0,
        labelLeft: 0
    });

    // 获取当前组件信息
    const curComponent = useMemo(() => {
        return getComponentById(componentId, components)
    }, [componentId])

    const [desc, setDesc] = useState(curComponent?.desc)

    useEffect(() => {
        updatePosition()
    }, [componentId, components, curComponent]);


    // 获取遮罩层和title组件的位置信息
    const updatePosition = () => {
        debounceHandle(() => {
            if (!componentId) return;
            // 获取编辑区最外层容器
            const container = document.querySelector(`.${containerClassName}`);
            if (!container) return;
            // 获取符合条件的自定义属性的dom
            const node = document.querySelector(`[data-component-id="${componentId}"]`);
            if (!node) return;
            // 获取组件的尺寸信息
            const {top, left, width, height} = node.getBoundingClientRect();
            // 获取编辑区容器的尺寸信息
            const {top: containerTop, left: containerLeft} = container.getBoundingClientRect();
            let labelTop = top - containerTop + container.scrollTop
            if (labelTop <= 0) {
                labelTop += 20
            }

            setPosition({
                top: top - containerTop + container.scrollTop,
                left: left - containerLeft + container.scrollLeft,
                width,
                height,
                labelTop,
                labelLeft: left - containerLeft + width
            })
            setDesc(curComponent?.desc)
        }, 200)

    }


    const el = useMemo(() => {
        return document.querySelector(`.${portalWrapperClassName}`)!
    }, []);

    // createPortal将 JSX 作为 children 渲染至 DOM 的不同部分
    return createPortal((
        <>
            <div
                style={{
                    position: "absolute",
                    left: position.left,
                    top: position.top,
                    border: "2px dashed blue",
                    pointerEvents: "none",
                    width: position.width,
                    height: position.height,
                    borderRadius: 4,
                    boxSizing: 'border-box',
                    transition: "all .2s linear",
                    zIndex: 1
                }}
            >
                <div
                    style={{
                        position: "absolute",
                        right: 0,
                        top: 0,
                        fontSize: "14px",
                        // zIndex: 11,
                        display: (!position.width || position.width < 10) ? "none" : "inline",
                        transform: 'translateY(-100%)',
                    }}
                >
               {
                   componentId === currentComponentId ? "" : <div
                       style={{
                           padding: '0 8px',
                           backgroundColor: 'blue',
                           borderRadius: 4,
                           color: '#fff',
                           cursor: "pointer",
                           whiteSpace: 'nowrap',
                       }}
                   >
                    {desc}
                </div>
               }
            </div>
            </div>

        </>
    ), el)
}

export default HoverMask;
